<template>
  <div id="order">
    <c-title :hide="false" :text="'订单管理'"></c-title>
    <div class="main" v-for="item in listData" :key="item.id">
      <div class="header">
        <div class="number">订单编号：{{ item.order_sn }}</div>
        <div class="btn" v-if="order_type == 'member'">
          <a v-if="item.lawyer_order && item.lawyer_order.type == 1 && item.lawyer_order.lawyer" :href="'tel:' + item.lawyer_order.lawyer.tel">
            <van-button color="#daa032">电话咨询</van-button>
          </a>
          <div @click="lineConsult(item)" v-if="item.lawyer_order && item.lawyer_order.is_valid == 1">
            <van-button color="#daa032">在线咨询</van-button>
          </div>
        </div>
      </div>
      <div class="avatar">
        <div @click="toDetail(item)">
          <van-image v-if="order_type == 'member' || order_type == 'office'" round width="2.5rem" height="2.5rem" :src="item.lawyer_order && item.lawyer_order.lawyer.avatar_image||''" />
          <van-image v-if="order_type == 'lawyer' && item.belongs_to_member" round width="2.5rem" height="2.5rem" :src="item.belongs_to_member.avatar" />
        </div>
        <div class="info">
          <span class="name" v-if="order_type == 'member' || order_type == 'office'">{{ item.lawyer_order && item.lawyer_order.lawyer && item.lawyer_order.lawyer.name }}</span>
          <span class="name" v-if="order_type == 'lawyer'">{{ item.belongs_to_member.nickname }}</span>
          <div>
            <span class="tel">{{ item.lawyer_order && item.lawyer_order.type == 1 ? "电话咨询" : "在线咨询" }}</span>
            <span class="date" v-if="item.lawyer_order.type == 2">有效期至{{ item.lawyer_order && item.lawyer_order.end_time||'--' }}</span>
          </div>
        </div>
      </div>
      <div class="content" v-if="item.flag">
        <div class="content-header">
          <template v-if="order_type == 'member'">
            <div class="number">付款时间:{{ item.pay_time }}</div>
          </template>
          <template v-else-if="order_type == 'lawyer' && item.belongs_to_member">
            <div class="contac-name">联系人姓名：{{ item.belongs_to_member.realname }}({{ item.belongs_to_member.mobile }})</div>
            <div class="lawyer-play">付款时间:{{ item.pay_time }}</div>
          </template>
          <template v-else>
            <div class="lawyer-play">付款时间:{{ item.pay_time }}</div>
            <div class="member-info">
              <van-image round width="2rem" height="2rem" :src="item.belongs_to_member.avatar" />
              <div class="nick-name">{{ item.belongs_to_member.nickname }}</div>
            </div>
            <div class="contac-name">{{ item.belongs_to_member.realname }}({{ item.belongs_to_member.mobile }})</div>
          </template>
        </div>
        <div class="avatar" v-for="goods in item.order_goods" :key="goods.id">
          <div @click="toGoods(goods.goods_id)">
            <van-image width="2.5rem" height="2.5rem" :src="goods.thumb" />
          </div>
          <div class="info">
            <span class="name">{{ goods.title }}</span>
            <div class="order-price">
              <span class="order-price-title">订单金额</span>
              <div class="ee0f0f price"><span>￥</span>{{ goods.price }}</div>
            </div>
          </div>
        </div>
      </div>
      <div :class="item.flag ?  'close':  'open'" @click="toogle(item.id)">
        {{ item.flag ?  "收起" :    "展开"}}
      </div>
    </div>
    <van-empty v-if="listData.length==0" description="暂无订单信息" />
  </div>
</template>

<script>
import { Image } from "vant";

export default {
  created() {
    if (this.$route.query.order_type == "lawyer") {
      this.httpUrl = "plugin.lawyer-platform.frontend.controllers.order.lawyerOrder";
    } else if (this.$route.query.order_type == "member") {
      this.httpUrl = "plugin.lawyer-platform.frontend.controllers.order.selfOrder";
    } else if (this.$route.query.order_type == "office") {
      this.httpUrl = "plugin.lawyer-platform.frontend.controllers.order.lawyerFirmOrder";
    }
    this.getdata();
    this.order_type = this.$route.query.order_type;
  },
  data() {
    return {
      httpUrl: "",
      page: 1,
      listData: [],
      order_type: ""
    };
  },
  methods: {
    lineConsult(data) {
      this.$router.push(this.fun.getUrl("chatWindow", {}, {user_id:data.uid, message_type:1,employeeId:  data.lawyer_order.lawyer.employee_id, chatType: 1 ,plugin_name:"lawyer"}));
    },
    toogle(id) {
      this.listData.forEach((item,i) => {
        if (item.id == id) {
          this.$set(this.listData,i,{...item,flag:!item.flag})
        }
      });
    },
    initdata() {
      this.page = 1;
      this.listData = [];
    },
    toGoods(id) {
      this.$router.push(this.fun.getUrl("goods", { id }));
    },
    toDetail(data) {
      let id = data.lawyer_order.lawyer.id;
      if (this.$route.query.order_type !== "lawyer") {
        this.$router.push(this.fun.getUrl("lawyerDetail", { id }, { order_type: "lawyer" }));
      }
    },
    getdata() {
      this.initdata();
      $http.post(this.httpUrl, {}, "正在加载中...").then(({ result, msg, data }) => {
        if (result) {
          this.listData = data.list.data;
          this.listData.forEach(item => {
            item.flag = false;
          });

          this.last_page = data.list.last_page;
        } else this.$toast(msg);
      });
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.last_page) return this.$toast("没有更多了");
      let page = this.page + 1;
      $http.post(this.httpUrl, { page }, "正在加载更多数据中...").then(({ result, msg, data }) => {
        this.isLoadMore = true;
        if (result) {
          this.page = page;
          this.listData = this.listData.concat(data.list.data);
        } else this.$toast(msg);
      });
    }
  },
  components: {
    VanImage: Image
  }
};
</script>

<style lang="scss" scoped>
#order {
  padding-bottom: 2rem;
}

.flex-column {
  flex-direction: column;
}

.lawyer-play {
  margin-top: 0.5rem;
}

.nick-name {
  margin-left: 0.2rem;
}

.contac-name {
  margin-top: 0.3rem;
}

.member-info {
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
}

.align-center {
  align-items: center;
}

.flex {
  display: flex;
}

.date {
  margin-left: 0.2rem;
}

.content {
  margin: 1rem 0;
  transition: all 1s ease;

  .content-header {
    display: flex;
    flex-direction: column;
    align-items: baseline;
  }
}

.order-price {
  display: flex;

  .order-price-title {
    font-size: 0.7rem;
    color: #6b6b6b;
    margin-right: 0.3rem;
  }

  .price {
    font-size: 0.7rem;
  }
}

.ee0f0f {
  color: #ee0f0f;
}

.close {
  color: #daa032;
  position: relative;
  text-align: center;
  line-height: 2rem;

  &::after {
    content: "";
    top: 46%;
    left: 57%;
    position: absolute;
    width: 8px;
    height: 8px;
    border-top: 2px solid #daa032;
    border-left: 2px solid #daa032;
    transform: rotate(46deg);
  }
}

.open {
  color: #daa032;
  position: relative;
  text-align: center;
  line-height: 2rem;

  &::after {
    content: "";
    top: 36%;
    left: 57%;
    position: absolute;
    width: 8px;
    height: 8px;
    border-top: 2px solid #daa032;
    border-left: 2px solid #daa032;
    transform: rotate(226deg);
  }
}

.info {
  margin-left: 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: baseline;
}

.avatar {
  display: flex;
  margin-top: 1rem;
  border-bottom: 0.1rem solid #f2f2f2;
  padding-bottom: 1rem;
}

.name {
}

.tel,
.date {
  font-size: 0.7rem;
  color: #6b6b6b;
}

.main {
  width: 22rem;
  background-color: #fff;
  border-radius: 0.3rem;
  margin: 1rem auto 0;
  padding: 1rem 1rem 0;
  border-radius: 0.5rem;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .btn {
    ::v-deep .van-button {
      width: 5rem;
      height: 2rem;
      font-size: 0.6rem;
    }
  }
}

.number {
  color: #717171;
}
</style>
